import { Component } from 'react';
import Frontend from './Frontend';
import Backend from './Backend';
import styles from './index.module.scss';
import React from 'react';
// 定义 Props 接口
interface IProps {
  title?: string;
}

// 定义 State 接口
interface IState {
  showSection: string; // 新增，默认显示 Frontend
}

class Resume extends Component<IProps, IState> {
  // 定义默认传递参数
  static defaultProps = {
    title: 'No Title'
  };

  // 构造函数定义默认状态
  constructor(props: IProps) {
    super(props);
    // 初始化状态
    this.state = {
      showSection: 'frontend' // 新增，默认显示 Frontend
    };
  }

  // 生命周期方法 - 组件挂载前
  componentDidMount(): void {

  }

  // 生命周期方法 - 组件更新前
  componentDidUpdate(prevProps: IProps, prevState: IState): void {

  }

  // 生命周期方法 - 组件卸载前
  componentWillUnmount(): void {

  }

  startX = 0;
  isTouching = false;

  handleTouchStart = (e: React.TouchEvent | React.MouseEvent) => {
    this.isTouching = true;
    if ('touches' in e) {
      this.startX = e.touches[0].clientX;
    } else {
      this.startX = e.clientX;
      window.addEventListener('mousemove', this.handleTouchMove as any);
      window.addEventListener('mouseup', this.handleTouchEnd as any);
    }
  };

  handleTouchMove = (e: React.TouchEvent | MouseEvent) => {
    if (!this.isTouching) return;
  };

  handleTouchEnd = (e: React.TouchEvent | MouseEvent) => {
    if (!this.isTouching) return;
    this.isTouching = false;
    let endX = 0;
    if ('changedTouches' in e) {
      endX = e.changedTouches[0].clientX;
    } else {
      endX = (e as MouseEvent).clientX;
      window.removeEventListener('mousemove', this.handleTouchMove as any);
      window.removeEventListener('mouseup', this.handleTouchEnd as any);
    }
    const deltaX = endX - this.startX;
    if (Math.abs(deltaX) > 60) {
      if (deltaX < 0 && this.state.showSection === 'frontend') {
        this.setState({ showSection: 'backend' });
      } else if (deltaX > 0 && this.state.showSection === 'backend') {
        this.setState({ showSection: 'frontend' });
      }
    }
  };

  // 主渲染方法
  render(): React.ReactNode {
    const { showSection } = this.state;
    return (
      <div className={styles.resumeContainer}>
        {/* 翻页动画容器，支持滑动/拖拽 */}
        <div
          className={styles.flipContainer}
          onTouchStart={this.handleTouchStart}
          onTouchMove={this.handleTouchMove}
          onTouchEnd={this.handleTouchEnd}
          onMouseDown={this.handleTouchStart}
          style={{ cursor: 'grab' }}
        >
          <div className={`${styles.flipper} ${showSection === 'backend' ? styles.flipped : ''}`}>
            <div className={styles.front}>
              <Frontend />
            </div>
            <div className={styles.back}>
              <Backend />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Resume;